<template>
  <section class="py-5 overflow-hidden">
    <div class="container-lg">
      <div class="row">
        <div class="col-md-12">

          <div class="section-header d-flex flex-wrap justify-content-between mb-5">
            <h2 class="section-title">类别</h2>

            <div class="d-flex align-items-center">
              <a href="/Organic/shop" class="btn btn-primary me-2">查看全部</a>
              <div class="swiper-buttons">
                <button class="swiper-prev category-carousel-prev btn btn-yellow">❮</button>
                <button class="swiper-next category-carousel-next btn btn-yellow">❯</button>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div class="row">
        <div class="col-md-12">

          <div class="category-carousel swiper">
            <div class="swiper-wrapper" >

              <a href="/Organic/shop" class="nav-link swiper-slide text-center"  v-for="(item,index) in productType" :key="index">
                <img :src="'http://localhost:90'+'/2025/03/25/category-thumb-'+item.typeId+'.jpg'" class="rounded-circle" alt="Category Thumbnail">
                <h4 class="fs-6 mt-3 fw-normal category-title">{{item.typeName}}</h4>
              </a>

            </div>
          </div>

        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'HomeView',
  components: {},
  props: {},
  data () {
    return {
      productType:[]
    }
  },
  // 计算属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    initProductType() {
      this.$axios.get("http://localhost:8090/product-type/getAllProductType?level="+1).then(({ data }) => {
        this.productType = data;
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.initProductType();
  },
  // 生命周期 - 创建之前
  beforeCreate () {},
  // 生命周期 - 挂载之前
  beforeMount () {},
  // 生命周期 - 更新之前
  beforeUpdate () {},
  // 生命周期 - 更新之后
  updated () {},
  // 生命周期 - 销毁之前
  beforeDestroy () {},
  // 生命周期 - 销毁完成
  destroyed () {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated () {}
}
</script>

<style scoped>

</style>
